<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-stack
-->
<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style=" height: 600px; width: 800px; margin: 0">
    <div id="container" style="background: rgb(16, 12, 42); height: 100%"></div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>


    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};

        var option;



        option = {
            // title: {
            //     text: '某站点用户访问来源',
            //     subtext: '纯属虚构',
            //     left: 'center'
            // },
            color: [
                "#065aab",
                "#066eab",
                "#0682ab",
                "#0696ab",
                "#06a0ab",
            ],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                buttom: 0,
                itemWidth: 10,
                itemHeight: 10,
                data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"], // 修改图例组件的文字为 12px
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12"
                }
            },
            series: [{
                name: '年龄分布',
                type: 'pie',
                radius: '50%',
                data: [{
                    value: 1,
                    name: "0岁以下"
                }, {
                    value: 4,
                    name: "20-29岁"
                }, {
                    value: 2,
                    name: "30-39岁"
                }, {
                    value: 2,
                    name: "40-49岁"
                }, {
                    value: 1,
                    name: "50岁以上"
                }],
                //居中显示
                center: ['50%', '50%'],
                //修改内圆半径和外圆半径
                radius: ['40%', '60%'],
                //不显示文字
                label: {
                    show: false
                },
                //不显示连接线
                labelLine: {
                    show: false
                },


            }]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    </script>
</body>

</html>